<template>
	<view style="background-color: #ebebeb;">
		<carHeader :title="'洗车'"></carHeader>
		<view class="root">
			<!-- 上面部分 服务站详情 -->
			<view class="top">
				<view class="images">
					<image src="/static/车联网服务-00首页_slices/图层 1.png" mode=""></image>
				</view>
				<view class="text01">
					<text>车百事汽车生活馆</text>
				</view>
				<view class="text02">
					<image src="/static/车联网服务-01专业洗车1slices/五星@3x.png" mode=""></image>
					<image src="/static/车联网服务-01专业洗车1slices/五星@3x.png" mode=""></image>
					<image src="/static/车联网服务-01专业洗车1slices/五星@3x.png" mode=""></image>
					<image src="/static/车联网服务-01专业洗车1slices/五星@3x.png" mode=""></image>
					<text>4分</text>
					<text>销量&nbsp;:&nbsp;&nbsp;556</text>
				</view>
				<view class="text03">
					<text>营业时间:&nbsp;周一至周五 早上8:00-晚上22:00</text>
				</view>
				<view class="text04">
					<text>位置:&nbsp;&nbsp;山阳区人民路与解放路交叉口</text>
					<image src="/static/车联网服务-01专业洗车1slices/plane@2x.png" mode=""></image>
				</view>
			</view>
			<!-- 中间部分 服务项目 -->
			<view class="middle">
				<view class="mtext01">
					<text>服务项目</text>
				</view>
				<!-- 单选框 -->
				<view class="options">
					<u-radio-group
					    v-model="radiovalue1"
					    placement="row"
					    @change="groupChange"
					  >
					    <u-radio
					      :customStyle="{marginRight: '8px'}"
					      v-for="(item, index) in radiolist1"
					      :key="index"
					      :label="item.name"
					      :name="item.name"
					      @change="radioChange(item)"
						  iconSize=0
						  size=10
					    >
					    </u-radio>
					  </u-radio-group>
				</view>
				<view class="mtext02">
					<text style="color: red;font-size: 45rpx;margin-right: 25rpx;">¥{{radiovalue2.newmoney}}</text>
					<text style="text-decoration: line-through;color: #898989;">¥{{radiovalue2.oldmoney}}</text>
				</view>
				<view class="mtext03">
					<text>{{radiovalue2.text}}</text>
				</view>
			</view>
			<!-- 下面部分 服务评价 -->
			<view class="bottom">
				<view class="btext01">
					<text>服务评价</text>
				</view>
				<view class="btext02" 
						v-for="(item, index) in people"
					    :key="index">
					<view class="btImage1">
						<image src="../../static/uni.png" mode=""></image>
					</view>
					<view class="">
						<view class="btText1">
							<text>{{item.name}}</text>
							<text style="float: right;">{{item.time}}</text>
						</view>
						<view class="btImage2">
							<image src="/static/车联网服务-01专业洗车1slices/五星@3x.png" mode=""></image>
							<image src="/static/车联网服务-01专业洗车1slices/五星@3x.png" mode=""></image>
							<image src="/static/车联网服务-01专业洗车1slices/五星@3x.png" mode=""></image>
							<image src="/static/车联网服务-01专业洗车1slices/五星@3x.png" mode=""></image>
						</view>
						<view class="btText2">
							<text>{{item.text}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 客服下单按钮 -->
			<view class="contact">
				<view class="c1" @click="openSheet">
					<image src="/static/车联网服务-01专业洗车1slices/客服@3x.png" mode="aspectFit"></image>
					<text>联系客服</text>
				</view>
				<view class="c2" @click="open">
					<image src="/static/车联网服务-01专业洗车1slices/矩形 10@2x.png" mode="aspectFit"></image>
					<text>立即下单</text>
				</view>
				<u-action-sheet
					:show="show2"
					@close="show2 = false"
					:actions="actions2"
					cancelText="取消拨号"
				>
				</u-action-sheet>
			</view>
			
		</view>	
	</view>
</template>

<script>
import { vShow } from "vue";
	export default {
		data() {
			return {
				show2: false, //客服弹框层
				actions2: [{
						name: '18642589456',
					},
					{
						name: '复制',
					}
				], //客服弹框数据
				// 单选框数据
			  radiolist1: [{
				name: '普通洗车',
				disabled: false,
				newmoney: '35.9',
				oldmoney: '60',
				text: '这里是普通洗车服务的详细介绍，这里是普通洗车服务的详细介绍，这里是普通洗车服务的详细介绍'
			  },
				{
				  name: '精洗',
				  disabled: false,
				  newmoney: '35.9',
				  oldmoney: '60',
				  text: '这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍'
				},
				{
				  name: '内饰精洗',
				  disabled: false,
				  newmoney: '35.9',
				  oldmoney: '60',
				  text: '这里是内饰精洗服务的详细介绍，这里是内饰精洗服务的详细介绍，这里是内饰精洗服务的详细介绍'
				}, {
				  name: '其他精洗',
				  disabled: false,
				  newmoney: '35.9',
				  oldmoney: '60',
				  text: '这里是其他精洗服务的详细介绍，这里是其他精洗服务的详细介绍，这里是其他精洗服务的详细介绍'
				}
			  ],
			  // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			  radiovalue1: '精洗',
			  radiovalue2:null, //单选框选中后展示信息赋值
			  people:[{ //评价部分数据
				  name:'黄**',
				  time:'2022-12-31',
				  text:'洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车!!!'
			  },{
				  name:'黄**',
				  time:'2022-12-31',
				  text:'洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车!!!'
			  },{
				  name:'黄**',
				  time:'2022-12-31',
				  text:'洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车!!!'
			  }]
			}
		},
		mounted() {  
		    // this.newName = this.formatName(this.name);  
			this.radiovalue2 = {newmoney: '35.9',
				  oldmoney: '60',
				  text: '这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍'} //静态页面初始赋值
		  },
		methods: {
			openSheet(){
				this.show2 = true;
			},
			groupChange(n) {	//多选按钮选中值
				// console.log(n);
			},
			radioChange(n) {	//选中后要拿取的值
				// console.log(n);
				this.radiovalue2 = n;
			},
			// 将名字后几个字转**方法
			// function formattedName(name) {
			// 	return name.substring(0,1) + new Array(name.length).join('*')
			// }
			open(){ //点击下单后跳转页面
				uni.navigateTo({
					url: '/pages/zhuanyexichequerendingdan/zhuanyexichequerendingdan',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
			
		}
	}
</script>

<style lang="scss">
	.root{
		position: absolute;
		top: 11%;
	}
	.top{
		margin-left: 4%;
		width: 82%;
		padding: 5%;
		// position: relative;
		border-radius: 30rpx;
		background-color: white;
		// top: 11%;
	}
	.images{
		image{
			height: 420rpx;
			width: 100%;
			border-radius: 30rpx;
		}
	}
	.text01{
		margin-top: 20rpx;
		text{
			font-weight: bold;
		}
	}
	.text02{
		padding: 10rpx 0;
		height: 25rpx;
		line-height: 25rpx;
		image{
			width: 25rpx;
			height: 25rpx;
			margin-right: 5rpx;
		}
		text{
			font-size: 25rpx;
			margin: 0 15rpx;
		}
	}
	.text03{
		margin: 15rpx 0;
	}
	.text04{
		margin: 5rpx 0;
		image{
			width: 35rpx;
			height: 35rpx;
			margin-left: 20rpx;
		}
	}
	.middle{
		margin-left: 4%;
		width: 82%;
		padding: 5%;
		// position:relative;
		border-radius: 30rpx;
		background-color: white;
		// top: 67%;
		margin-top: 30rpx;
	}
	.options{
		padding: 30rpx 0;
		border-bottom: 1rpx solid #ececec;
	}
	.mtext01{
		text{
			font-weight: bold;
		}
	}
	.mtext02{
		padding: 30rpx 0;
	}
	.mtext03{
		line-height: 60rpx;
	}
	.bottom{
		margin-left: 4%;
		width: 82%;
		padding: 5%;
		// position:relative;
		border-radius: 30rpx;
		background-color: white;
		// top: 67%;
		margin-top: 30rpx;
	}
	.btext01{
		text{
			font-weight: bold;
		}
	}
	.btImage1{
		padding-right: 25rpx;
		image{
			height: 100rpx;
			width: 100rpx;
			border-radius: 100%;
		}
	}
	.btImage2{
		padding: 10rpx 0 15rpx 0;
		image{
			width: 20rpx;
			height: 20rpx;
			margin-right: 5rpx;
		}
	}
	.btext02{
		display: flex;
		padding: 30rpx 0;
		
	}
	.contact{
		margin-top: 100rpx;
		height: 150rpx;
		background-color: white;
		.c1{
			margin-left: 20rpx;
			height: 150rpx;
			// line-height: 150rpx;	
			image{
				padding-top: 50rpx;
				height: 50rpx;
				width: 60rpx;
			}
			text{
				position: absolute;
				bottom: 53rpx;
				margin-left: 15rpx;
				// line-height: 150rpx;	
			}
		}
		.c2{
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			float: right;
			image{
				position: absolute;
				right: 15rpx;
				bottom: 15rpx;
				height: 80rpx;
				width: 200rpx;
			}
			text{
				color: white;
				position: relative;
				right: 48rpx;
				bottom: 35rpx;
			}
		}
	}


</style>
